import React, { DragEvent } from 'react'
import styles from './index.module.scss'

interface Props {
    height?: number
    onDropHandle: (data: File) => void
}

const Drop: React.FC<Props> = ({ height = 100, onDropHandle }) => {
    const onDrop = (e: DragEvent) => {
        e.preventDefault()

        if (e.dataTransfer.files.length > 0) {
            onDropHandle(e.dataTransfer.files[0])
        }
    }

    const onDragOver = (e: DragEvent) => {
        e.preventDefault()
    }

    return (
        <div
            className={styles.drop_wrap}
            style={{ height }}
            onDragOver={onDragOver}
            onDrop={onDrop}>
            拖动放置区域
        </div>
    )
}

export default Drop